<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <form @submit.prevent="demo">
            账户：<input type="text" v-model.trim.lazy="userInfo.account" autocomplete="off"><br><br>
            密码：<input type="password" v-model.lazy="userInfo.password" autocomplete="off"><br><br>
            年龄：<input type="number" v-model.number="userInfo.age"><br><br>
            性别：
            男<input type="radio" name="sex" value="man" v-model="userInfo.sex">
            女<input type="radio" name="sex" value="woman" v-model="userInfo.sex"><br><br>
            爱好：
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br><br>
            所属校区
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz">深圳</option>
                <option value="wh">武汉</option>
            </select><br><br>
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://ntlias-stu.boxuegu.com/home"
                target="_blank">《用户协议》</a><br><br>
            <button type="submit">提交</button>
        </form>
    </div>
    <script>
        Vue.config.productionTip = false //取消生产提示

        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    userInfo: {
                        account: '',
                        password: '',
                        sex: '',
                        age: '',
                        hobby: [],
                        city: '',
                        other: '',
                        agree: ''
                    }
                }
            },
            methods: {
                demo() {
                    console.log(JSON.stringify(this.userInfo));
                }
            },
        })
    </script>
</body>

</html>